<template>
  <div class="about">
    <div v-for="(item, index) in list" :key="index" v-show="edit == index">
      <div>{{ item.title }}</div>
      <ul>
        <li v-for="(it, key) in item.options" :key="key">
          <span>{{ key + 1 }}</span
          ><input type="radio" name="a" @click="go(key)" /><span>{{ it }}</span>
        </li>
      </ul>
      <div>
        <button v-show="show == 0" @click="qie(index)">提交答案</button>
        <button v-show="show == 1" @click="qie(index)">回答正确</button>
        <button v-show="show == 2" @click="qie(index)">回答错误</button>
        <span v-if="num != 3">还有{{ num }}秒进入下一题</span>
      </div>

      <div>共有4/<span>{{sum}}</span>道题</div>答对<span>{{a}}</span>答错<span>{{b}}</span>
    </div>

   
  </div>
</template>

<script>
import jb from "../../public/data(4)";
console.log(jb.data);
export default {
  data() {
    return {
      list: jb.data,
      show: 0,
      key: null,
      edit: 0,
      num: 3,
      a:0,
      b:0,
      sum:1
    };
  },
  methods: {
    qie(index) {
      if (this.key == null) {
        return false;
      }
      if (this.list[index].right == this.key) {
        this.a++
       
        this.show = 1;
        var timer = setInterval(() => {
          this.num--;
          if (this.num == 0) {
            clearInterval(timer);
             if(this.sum==4){
          this.sum=1
        }else{
          this.sum++
        }
            this.num = 3;
            this.show = 0;
            if (this.edit != 3) {
              this.edit += 1;
            } else {
              this.edit = 0;
            }
            this.key = null;
          }
        }, 1000);

        console.log(this.num);
      } else {
        this.show = 2;
        this.b++
        
        var timer = setInterval(() => {
          this.num--;
          if (this.num == 0) {
            clearInterval(timer);
            if(this.sum==4){
          this.sum=1
        }else{
          this.sum++
        }
            this.num = 3;
            this.show = 0;
            if (this.edit != 3) {
              this.edit += 1;
            } else {
              this.edit = 0;
            }
            this.key = null;
          }
        }, 1000);
      }
    },
    go(key) {
      this.key = key;
    },
  },
};
</script>
